<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<jsp:include page="WEB-INF/info.jsp"></jsp:include>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>杭州师范大学 开放课程平台—网络课堂</title>
		<script type="text/javascript">
		$("#tree").ready(function(){
			// 载入菜单
			$.getJSON("LoadCourseMenu.action",function(data){
				$.each(data.TypeList, function(i,item){
					var nodeName = "node" + i;
					$("#tree").append("<div id='" + nodeName + "'></div>");
					$("#" + nodeName).append("<span id='" + nodeName + "_title'>" + item.cname + "</span>");
					var contentName = nodeName + "_content";
					$("#" + nodeName).append("<div id='" + contentName + "'></div>");
					$.each(item.subtypes, function(j, item2){
						$("#" + contentName).append("<a href='javascript:load(" + item2.id + ")'>" + item2.sname + "</a>");
					});
				});
				
				$("#tree>div>div").hide();
				$("#tree>div>span").bind("click", function(){
					var prefix = this.id.substring(0, this.id.indexOf("_") + 1);
					var selector = "#" + prefix + "content";
					var contentNode = $(selector);
					contentNode.slideToggle(200);
				});
			});
		});

		function load(subtype){
			$.post("LoadCourse", {subtype:subtype},function(data){
				//$("#course-list").append(<div class='course-item'></div>);...
			});
		}
		</script>
	</head>
	<body>
	<jsp:include page="header.jsp"></jsp:include>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td colspan="2">
						<div class="current"><img src="images/house.png"/>当前位置：首页&gt;网络课堂</div>
					</td>
				</tr>
				<tr>
					<td class="content-left">
						<div class="course-nav">
							<span>课程分类导航</span>
						</div>
						<div id="tree" class="tree">
						</div>
					</td>
					<td class="content-right">
						<div class="course-head">
							<span class="title">课程列表</span>
						</div>
						<div id="course-list">
							<div class="course-item">
								<img src="images/course-cover.jpg" class="course-pic" width="59" height="58"/>
								<fieldset class="fieldset">
								<legend class="legend">
								<img src="images/course-title-l.png" /><span><a href="course.jsp">媒体设计</a></span><img src="images/course-title-r.png" />
								</legend>
								<span class="blank">讲师：诸彬&nbsp;&nbsp;&nbsp;发布时间：2010-02-01&nbsp;&nbsp;&nbsp;点击量：2次</span>
								<table width="90%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="90px" align="right">
											<table width="48px" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td><img src="images/article-text.png" /></td>
													<td><img src="images/article-cd.png" /></td>
												</tr>
												<tr>
													<td><img src="images/article-attach.png" /></td>
													<td>&nbsp;</td>
												</tr>
											</table>
										</td>
										<td width="30px">&nbsp;</td>
										<td class="course-desc">本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜活泼，深受同学喜欢迎大家来学习！欢迎大家来学习！……</td>
									</tr>
								</table>
								</fieldset>
							</div>
							<div class="course-item">
								<img src="images/course-icon-fl.png" class="course-pic" />
								<fieldset class="fieldset">
								<legend class="legend">
								<img src="images/course-title-l.png" /><span>Fl入门</span><img src="images/course-title-r.png" />
								</legend>
								<span class="blank">讲师：诸彬&nbsp;&nbsp;&nbsp;发布时间：2010-02-01&nbsp;&nbsp;&nbsp;点击量：2次</span>
								<table width="90%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="90px" align="right"><table width="48px" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td><img src="images/article-text.png" /></td>
													<td><img src="images/article-cd.png" /></td>
												</tr>
												<tr>
													<td><img src="images/article-attach.png" /></td>
													<td>&nbsp;</td>
												</tr>
											</table></td>
										<td width="30px">&nbsp;</td>
										<td class="course-desc">本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜活泼，深受同学喜欢迎大家来学习！欢迎大家来学习！……</td>
									</tr>
								</table>
								</fieldset>
							</div>
							<div class="course-item">
								<img src="images/course-icon-ai.png" class="course-pic" />
								<fieldset class="fieldset">
								<legend class="legend">
								<img src="images/course-title-l.png" /><span>Ai入门</span><img src="images/course-title-r.png" />
								</legend>
								<span class="blank">讲师：诸彬&nbsp;&nbsp;&nbsp;发布时间：2010-02-01&nbsp;&nbsp;&nbsp;点击量：2次</span>
								<table width="90%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="90px" align="right"><table width="48px" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td><img src="images/article-text.png" /></td>
													<td><img src="images/article-cd.png" /></td>
												</tr>
												<tr>
													<td><img src="images/article-attach.png" /></td>
													<td>&nbsp;</td>
												</tr>
											</table></td>
										<td width="30px">&nbsp;</td>
										<td class="course-desc">本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜爱。欢迎大家来学习！本课程有45个课时，由最受欢迎的诸彬老师主讲，课程内容生动活泼，深受同学喜活泼，深受同学喜欢迎大家来学习！欢迎大家来学习！……</td>
									</tr>
								</table>
								</fieldset>
							</div>
							<!--<div class="pagination">
								<div class="page"><span class="frontpage border">&nbsp;
									</span>
									<span class="page-selected">1</span>
									<a>2</a>
									<span>&hellip;
									</span>
									<a><span class="nextpage">下一页</span></a>
									<span>共100页&nbsp;&nbsp;到第<input type="text" value="1" size="3"  class="input"/>页</span>
									<input type="button" value="确定"/>
								</div>
							</div>-->
						</div>
					</td>
				</tr>
			</table>
	<jsp:include page="footer.jsp"></jsp:include>
	</body>
</html>